<template>
	<view class="process_main">
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" title="提示" @confirm="getConfirm" showCancelButton @cancel="show = false">
			<view class="slot-content" style="z-index: 999;">
				<view class="" style="text-align: center;font-size: 14px;">
					你确定要放弃维修
				</view>
			</view>
		</u-modal>
		<view class="content" style="margin: 0;	background-color: #fff;border-radius: 20rpx;padding: 30rpx;">
			<view class="header" style="margin-top: 0;">
				<view class=" flex flex_bet flex_align">
					<view class="left">
						<text class="iconfont icon-suijiyonghu"></text>
						<text>申请信息</text>
					</view>
					<view class="right" @click="gotoUrl('/pages/applicationDetails/component/sendDetail?id='+sid+'&sign_time='+signfor.signfor_time)">
						<text class="iconfont icon-chakan"></text>
						<text class="ck">查看</text>
					</view>
				</view>
				<view class="date">
						<!-- <view class="">申请日期：{{dateNew(repairList.create_time)}}</view> -->
						<view class="">申请日期：{{repairList.create_time | newDate}}</view>
				</view>
			</view>
			<view class="details flex flex_bet flex_align">
					<view class="details_text">
						<view class="text flex flex_bet"><text class="info">寄修单号</text><text>{{repairList.order_num}}</text> </view>
						<view class="text flex flex_bet"><text class="info">寄修产品型号</text> <text>{{repairList.product_model}}</text></view>
						<view class="text flex flex_bet"><text class="info">寄修产品SN码</text> <text class="sn_code" @click="">{{repairList.serial_number}}</text> </view>
						<view class="text flex flex_bet"><text class="info">快递单号</text>
							<text v-if="repairList.express_number"  @click="gotoUrl('/pages/applicationDetails/component/logisticsStatus?expressageId='+repairList.express_number+'&phone='+repairList.user_phone)" 
								:class="repairList.express_number ? '' : 'coRed'"
								class="check">{{repairList.express_number}}</text><!--请求物流信息-->
							<text v-else @click="gotoUrl('/pages/applicationDetails/component/sendDetail?id='+sid+'&sign_time='+signfor.signfor_time+'&is_edit='+true)"
								:class="repairList.express_number ? '' : 'coRed'"
								class="check">订单暂存，请完善寄回快递单号</text>
							<!-- <text class="mar_left iconfont icon-fuzhi" @click="copy(repairList.express_number)"></text> -->
						</view>
						<view class="text flex flex_bet"><text class="info">姓名</text> <text>{{repairList.user_man}}</text> </view>
						<view class="text flex flex_bet"><text class="info">电话号码</text> <text>{{repairList.user_phone}}</text> </view>
						<view class="line"></view>
					</view>
					<!-- <view class="details_icon" @click="openclickable">
						<image src="@/static/image/index8.png" mode=""></image>
						<view class="" style="margin-top: 10rpx;font-size: 28rpx;">查看申请</view>
					</view> -->
				</view>
		<!-- 	<view class="date flex flex_bet flex_align">
				<view class="">申请日期：{{repairList.create_time | newDate}}</view>
			</view> -->
		<!-- 	<view class="details flex flex_bet flex_align">
				<view class="details_text ">
					<view class="text"><text class="info">寄修产品型号：</text>{{repairList.product_model}}</view>
					<view class="text"><text class="info">寄修产品SN码：</text>{{repairList.serial_number}}</view>
					<view class="text"><text class="info">寄修单号：</text>{{repairList.order_num}}</view>
					<view class="text"><text class="info">快递单号：</text>
						<text @click="goToUrl(repairList.express_number)"
							:class="repairList.express_number ? '' : 'coRed'"
							class="check">{{repairList.express_number ? repairList.express_number : '订单暂存，请完善寄回快递单号'}}</text>
						<text class="mar_left iconfont icon-fuzhi" @click="copy(repairList.express_number)"></text>
					</view>
					<view class="text flex flex_align"><text class="info">姓名：</text>{{repairList.user_man}}</view>
					<view class="text"><text class="info">电话号码：</text>{{repairList.user_phone}}</view>
				</view>
				<view class="details_icon" @click="openclickable">
					<image src="@/static/image/index8.png" mode=""></image>
					<view class="" style="margin-top: 10rpx;font-size: 28rpx;">查看申请</view>
				</view>
			</view> -->
		</view>
	<!-- 步骤条 -->
	<view class="steps">
		<view class="out-box">
			<view class="self-box">
				<view ></view>   
				<text class="active_txt" v-if="currentStep==1">签收</text>
				<text class="success_txt" v-if="currentStep>1">签收</text>
			</view>
			<view class="self-box">
				<view></view>
				<text class="defult_txt" v-if="currentStep<2">复判</text>
				<text class="active_txt" v-if="currentStep==2">复判</text>
				<text class="success_txt" v-if="currentStep>2">复判</text>
			</view>
			<view class="self-box">
				<view></view>
				<text class="defult_txt" v-if="currentStep<3">报价</text>
				<text class="active_txt" v-if="currentStep==4 || currentStep==3">报价</text>
				<text class="success_txt" v-if="currentStep>4">报价</text>
			</view>
			<view class="self-box">
				<view></view>
				<text class="defult_txt" v-if="currentStep<5">维修</text>
				<text class="active_txt" v-if="currentStep==5">维修</text>
				<text class="success_txt" v-if="currentStep>5">维修</text>
			</view>
			<view class="self-box">
				<view></view>
				<text class="defult_txt" v-if="currentStep<6">品控</text>
				<text class="active_txt" v-if="currentStep==6">品控</text>
				<text class="success_txt" v-if="currentStep>6">品控</text>
			</view>
			<view class="self-box">
				<text class="defult_txt" v-if="currentStep<7">寄回</text>
				<text class="active_txt" v-if="currentStep==7">寄回</text>
				<text class="success_txt" v-if="currentStep>7">寄回</text>
			</view>
		</view>
	</view>
		<!-- 详情 -->
		<!-- <slot name="footer" :user="sendback ? sendback : ''"></slot> -->
		<uni-collapse @change="collChange" v-model="value">
			<!-- 快递状态 -->
			<uni-collapse-item :border="false" title-border="none">
				<template v-slot:title>
					<view class="flex flex_align mar_left_middle pad_top pad_bottom"  style="position: relative;border-radius: 20rpx;">
						<u-image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/express_status.svg" width="45rpx" height="45rpx"></u-image>
						<text class="mar_left" style="font-size: 28rpx;color:#333639;">快递状态</text>
						<u-badge :isDot="isDot=='express_status' && express_status != null?true:false" type="error" :absolute="true" customStyle="left:200rpx; top:20rpx;"></u-badge>
					</view>
				</template>
				<view class="sign_content"  style="padding-bottom: 30rpx; overflow: hidden;background-color: #f1f2f3;">
					<!-- <uni-steps :options="traceInfoList" active-color="#007AFF" :active="11"  direction="column" /> -->
					<!-- <scroll-view scroll-y="true" style="height: 300rpx;">
						<uni-steps :options="traceInfoList" active-color="#007AFF" :active="11"  direction="column" />
					</scroll-view> -->
					<cc-defineStep colors="#fa436a" :stepData="traceInfoList"></cc-defineStep>

				</view>
			</uni-collapse-item>
			<!-- 签收 -->
			<uni-collapse-item :border="false" title-border="none" :disabled="signfor?false:true" name="signfor">
				<template v-slot:title>
					<view class="flex flex_align mar_left_middle pad_top pad_bottom" @click="cellDisabled(signfor)" style="position: relative;border-radius: 20rpx;">
						<u-image src="@/static/image/qs.jpg" width="45rpx" height="45rpx"></u-image>
						<text class="mar_left" style="font-size: 28rpx;color:#333639;">签收版块</text>
						<u-badge :isDot="isDot=='signfor' && signfor != null?true:false" type="error" :absolute="true" customStyle="left:200rpx; top:20rpx;"></u-badge>
					</view>
				</template>
				<view class="sign_content"  style="padding-bottom: 30rpx; overflow: hidden;background-color: #f1f2f3;" v-if="signfor">
					<view class="flex flex_bet flex_align pad_bottom">
						<view class="">
							<text style="font-size: 22rpx;color: #a0a0a2;">售后人员：</text>{{signfor.admin_name}}
						</view>
						<view class="date">
							{{signfor.signfor_time | newDate(type='rq')}}
						</view>
					</view>
					<view class="sign_main flex flex_bet">
						<view class="">签收状态：{{signfor.signfor_status}}</view>
						<view class="">签收类别：{{signfor.signfor_type}}</view>
						<view class="">签收费用：{{signfor.signfor_cost}}元</view>
					</view> 
					<view class="decs box_redius">
						<view class="flex flex_bet">
							<text>备注</text>
						</view>
						<view class="fot flex flex_bet flex_align">
							<view class="fot_remark">{{signfor.signfor_remarks ? signfor.signfor_remarks : '无备注说明' }}</view>
							<view class="right">
								<view class="img">
									<u-swiper indicator :autoplay="false" :list="signfor.signfor_img ? signfor.signfor_img.split(',') : swiperDefImg" indicatorStyle="bottom:-15%"
										@click="bannerShow(index,signfor.signfor_img ? signfor.signfor_img.split(',') : '')" @change="e => current = e.current" height="85" overflowVisible="visible">
										<view slot="indicator" class="indicator">
											<view class="indicator__dot" v-for="(item, index) in  1" :key="index"
												:class="[index === current && 'indicator__dot--active']">
											</view>
										</view>
									</u-swiper>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
			<!-- 复判 -->
			<uni-collapse-item :border="false" title-border="none" :disabled="retrial?false:true" name="retrial">
				<template v-slot:title>
					<view class="flex flex_align mar_left_middle pad_top pad_bottom" @click="cellDisabled(retrial)" style="position: relative;">
						<u-image src="@/static/image/fp.jpg" width="45rpx" height="45rpx"></u-image>
						<text class="mar_left" style="font-size: 28rpx;color:#333639;">复判板块</text>
						<u-badge :isDot="isDot =='retrial' && retrial != null?true:false" type="error" :absolute="true" customStyle="left:200rpx; top:20rpx;"></u-badge>
					</view>
				</template>
				<view class="rep_content"  style="padding-bottom: 30rpx; overflow: hidden;background-color: #f1f2f3;" v-if="retrial">
					<view class="header flex flex_bet flex_align">
						<view>售后人员：<text class="after_sale">{{retrial.admin_name}}</text></view>
						<view>复判结果：<text class="text_bg">{{retrial.retrial_status}}</text></view>
					</view>
					<view class="rep_desc box_redius">
						<text>描述说明</text>
						<view class="fot flex flex_bet">
							<view class="fot_remark">{{retrial.element_desc ? retrial.element_desc : '无备注说明'}}</view>
							<view class="right">
								<view class="date">
									{{retrial.retrial_time | newDate}}
								</view>
								<view class="img">
									<u-swiper indicator :autoplay="false" :list="retrial.element_img ? retrial.element_img : swiperDefImg" indicatorStyle="bottom:-15%"
										@click="bannerShow(index,retrial.element_img ? retrial.element_img : '')" @change="e => current = e.current" height="85" overflowVisible="visible">
										<view slot="indicator" class="indicator">
											<view class="indicator__dot" v-for="(item, index) in retrial.element_img ?retrial.element_img :1" :key="index"
												:class="[index === current && 'indicator__dot--active']">
											</view>
										</view>
									</u-swiper>
								</view>
							</view>
						</view>
					</view>
					<!-- 客户确认模块  只有在复判是报废的情况下展示-->
					<view class="client_confirm mar_bottom_middle" v-if="retrial.retrial_status == '复判报废' && sendback == null">
						<!-- <view class="top_line"></view> -->
						<view class="client_confirm_cont">
							<view class="top_line"></view>
							<view class="tit"><text class="iconfont icon-shiwujiaoxing"></text>客户请确认:</view>
							<view class="text">
								您的送修件因无法维修将进入报废程序，请您确认原送修件是否需要按原址寄回(注: 1.若同期您没有其他维修件，寄回将采用快递费到付方式寄回; 2.若同期您有其他维修件，我们将尽可能与其他一并寄回，若因此超重导致运费增加或导致其他送修返还周期延长1~2天，还请理解; 3.若 您对维修存有疑虑，请拨打<text style="color: #62c28c;">4008-017-018</text>，谢谢。
							</view>
							<view class="client_select flex flex_bet flex_align mar_top">
								<u-button type="primary" shape="circle" :disabled="is_send_btn" text="原件不良品需寄回" customStyle="margin-right:5%" @click="needSend()"></u-button>
								<u-button type="primary" shape="circle" :disabled="is_send_btn" text="原件不良品请丢弃" customStyle="margin-left:5%" @click="pleaseDiscard()"></u-button>
							</view>
						</view>
					</view>
					<!-- 留言 -->
					<!-- <view :class="['leave_msg',retrial.is_user_msg == 1?'leave_msg_forbidden':'']">
						<text>留言</text>
						<textarea v-model="retrialLeaveMsg"  @confirm="submitLeaveMsg('1')" placeholder="可以对工作人员填写留言" :disabled="retrial.is_user_msg == 1?true:false"></textarea>
					</view> -->
				</view>
			</uni-collapse-item>
			<!-- 报价 -->
			<uni-collapse-item :border="false" title-border="none" :disabled="quote?false:true" name="quote">
					<template v-slot:title>
						<view class="flex flex_align mar_left_middle pad_top pad_bottom" @click="cellDisabled(quote)" style="position: relative;">
							<!-- <u-image src="../../../../static/image/bj.jpg" width="45rpx" height="45rpx"></u-image> -->
							<u-image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/bj.jpg" width="45rpx" height="45rpx"></u-image>
							<text class="mar_left" style="font-size: 28rpx;color:#333639;">报价/付维修费板块</text>
							<u-badge :isDot="isDot == 'quote'?true:false" type="error" :absolute="true" customStyle="left:300rpx; top:20rpx;"></u-badge>
						</view>
					</template>
				<view class="price_content" style=" overflow: hidden;background-color: #f1f2f3;" v-if="quote">
					<view class="header flex flex_bet flex_align">
						<view>售后人员：<text class="after_sale">{{quote.admin_name}}</text></view>
						<view class="download" @click="noDone">
							下载报价单<text class="iconfont icon-xiazai"></text>
						</view>
						<view >报价价格：<text class="text_bg">{{quote.repair_total ? quote.repair_total:0}}元</text></view>
					</view>
					<view class="box_redius">
						<view class="price_detail">
							<!-- <view class="meta_price flex flex_bet flex_align"@click="gotoUrl('/pages/applicationDetails/component/matePrice?list='+quote.stuff_list)"> -->
							<view class="meta_price flex flex_bet flex_align"@click="noDone">
								<view>材料价格</view>
								<view class="pic flex flex_bet flex_align">
									<view>{{quote.stuff_total ? quote.stuff_total:0}}元</view>
									<text class="iconfont icon-xiangyoujiantou" style="font-size: 20rpx;"></text>
								</view>
							</view>
							<view class="meta_price flex flex_bet flex_align">
								<view>到付我司运费</view>
								<view class="pic flex flex_bet flex_align">
									<view>{{quote.freight ?quote.freight :0}}元</view>
								</view>
							</view>
							<view class="meta_price flex flex_bet flex_align">
								<view>维修工时费</view>
								<view class="pic flex flex_bet flex_align">
									<view>{{quote.time_cost ?quote.time_cost :0}}元</view>
								</view>
							</view>
							<view class="meta_price flex flex_bet flex_align">
								<view>我司寄回费</view>
								<view class="pic flex flex_bet flex_align">
									<view>{{quote.return_freight ?quote.return_freight :0}}元</view>
								</view>
							</view>
							<view class="meta_price flex flex_bet flex_align" style="color: #555; font-weight: bold;">
								<view>费用总价</view>
								<view class="pic flex flex_bet flex_align">
									<view>{{quote.repair_total ? quote.repair_total:0}}元</view>
								</view>
							</view>
						</view>
						<view class="rep_desc">
							<text>描述说明</text>
							<view class="fot flex flex_bet">
								<view class="fot_remark">{{quote.element_desc ? quote.element_desc: '无备注说明'}}</view>
								<view class="right">
									<view class="date">
										<!-- 2022-05-13 20:01 -->
										{{quote.update_time | newDate}}
									</view>
									<view class="img">
										<u-swiper indicator :autoplay="false" :list="quote.element_img ?quote.element_img.split(',') : swiperDefImg" indicatorStyle="bottom:-15%"
											@click="bannerShow(index,quote.element_img ? quote.element_img.split(',') : '')" @change="e => current = e.current" height="85" overflowVisible="visible">
											<view slot="indicator" class="indicator">
												<view class="indicator__dot" v-for="(item, index) in 1" :key="index"
													:class="[index === current && 'indicator__dot--active']">
												</view>
											</view>
										</u-swiper>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 付款 -->
					<view class="payment_line mar_top"></view>
					<view class="payment ">
						<view class="">
							<view class="headers">请选择是否需要寄回不良件 <text style="color: red; font-size: 10px; margin-left: 5px;">(预计会产生额外的快递费用)</text></view>
								<view style="color: #b0b0b0; font-size:20rpx;">
									注*如对报价有异议请联系小红本售后服务中心微信
								</view>
							<view class="mar_top rid">
								<u-radio-group v-model="bad_info.bad_type" placement="row" stateClass="checkbox"
									:disabled="payStatus" @change="showaaa">
									<u-radio :name="0" :customStyle="{width:'50%',fontSize:'28rpx'}" shape="square" labelSize="12"
										label="原不良件 无需寄回"></u-radio>
									<u-radio :name="1" :customStyle="{width:'50%',fontSize:'28rpx',display:'flex',justifyContent:'flex-end'}" shape="square" labelSize="12"
										label="原不良件 需寄回"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="pre_pay flex flex_bet">
							<view class="">
								<view>预支付寄回快递费</view>
								<view style="font-size: 20rpx;color: #b0b0b0;">
									(寄回运费默认18元，若不勾选则默认运费到付方式寄回)
								</view>
							</view>
							<u-checkbox-group placement="row" iconPlacement="right" :disabled="payment.pay_status == 1 ? true:false">
								<u-checkbox :checked="quote.return_freight > 0 ?true:false" name="adv"  @change="advChange"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="replenish mar_top" style="margin-bottom: 40rpx;position: relative;" v-if="">
							<!-- <view class="" style="margin-bottom: 5px;">费用补充说明</view> -->
							<!-- <u--textarea v-model="bad_info.bad_desc" placeholder="请填写费用补充说明" :disabled="payStatus">
							</u--textarea> -->
							<!-- <view style="color: #808080; position: absolute;top: 10rpx;left: 10rpx;font-size: 28rpx;z-index: 99;" v-if="show">{{bad_info.bad_desc ?bad_info.bad_desc : "请填写费用补充说明"}}</view> -->
							<!-- <textarea  v-model="bad_info.bad_desc"  :disabled="payStatus"  v-if="show">
							</textarea> -->
							<view class="text_area" style="border: 1px solid #aeb7f7;border-radius: 20rpx;overflow: hidden;">
								<u--textarea v-model="bad_info.bad_desc" placeholder="请填写费用补充说明" height="60" :disabled="payStatus " border="none" placeholderStyle="color:red"></u--textarea>
							</view>
							<!-- <textarea v-model="bad_info.bad_desc" placeholder="请填写费用补充说明" :disabled="payStatus " ></textarea> -->
						</view>
						
						<view class="flex flex_align flex_bet mar_top pad_bottom">
							<view class="payment_btn blue"
								:class="[payment.pay_status == 1 ? 'define' : '',is_giveup == 1 ? 'define' : '']"
								@click="confirmPayment(payment,is_giveup)">{{quote.repair_total}}<text
									class="line"></text>{{payment.pay_status == 1 ? '已付款' : '付款'}}</view>
							<view class="payment_btn yellow"
								:class="[payment.pay_status == 1 ? 'define' : '',is_giveup == 1 ? 'define' : '']"
								@click="getrepairGiveup(payment,is_giveup)">放弃维修</view>
						</view>
						<!-- <view class="headers mar_top_middle" style="font-size: 24rpx;color: #9c9c9c;text-align: right;">
							下载报价单<text class="iconfont icon-xiazai"></text>
						</view> -->
					</view>
					
					<!-- 留言 -->
					<view class="leave_msg" v-if="cureentItem.find(item=> item == 'quote')|| value[0] == 'quote'">
						<text>留言</text>
						<textarea v-model="quoteLeaveMsg" @confirm="submitLeaveMsg('2')"  placeholder="可以对工作人员填写留言" :disabled="quote.is_user_msg == 1?true:false || currentStep>4?true:false"></textarea>
					</view>
				</view>
			</uni-collapse-item>
			<!-- 维修 -->
			<uni-collapse-item :border="false" title-border="none" :disabled="overhaul?false:true" name="overhaul">
				<template v-slot:title>
					<view class="flex flex_align mar_left_middle pad_top pad_bottom" @click="cellDisabled(overhaul)" style="position: relative;">
						<u-image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/wx.jpg" width="45rpx" height="45rpx"></u-image>
						<text class="mar_left" style="font-size: 28rpx;color:#333639;">维修板块</text>
						<u-badge :isDot="isDot == 'overhaul' && overhaul != null?true:false" type="error" :absolute="true" customStyle="left:200rpx; top:20rpx;"></u-badge>
					</view>
				</template>
				<view class="rep_content" style=" overflow: hidden;background-color: #f1f2f3;" v-if="overhaul">
					<view class="header flex flex_bet flex_align">
						<view>售后人员：<text class="after_sale">{{overhaul.admin_name}}</text></view>
						<view>维修结果：<text class="text_bg">{{overhaul.overhaul_status}}</text></view>
					</view>
					<view class="rep_desc box_redius">
						<text>描述说明</text>
						<view class="fot flex flex_bet">
							<view class="fot_remark">{{overhaul.overhaul_desc ?overhaul.overhaul_desc :'无备注说明'}}</view>
							<view class="right">
								<view class="date">
									{{overhaul.update_time | newDate}}
								</view>
								<view class="img">
									<u-swiper indicator :autoplay="false" :list="overhaul.overhaul_img?overhaul.overhaul_img.split(','):swiperDefImg" indicatorStyle="bottom:-15%"
										@click="bannerShow(index,overhaul.overhaul_img ? overhaul.overhaul_img.split(',') : '')" @change="e => current = e.current" height="85" overflowVisible="visible">
										<view slot="indicator" class="indicator">
											<view class="indicator__dot" v-for="(item, index) in 1" :key="index"
												:class="[index === current && 'indicator__dot--active']">
											</view>
										</view>
									</u-swiper>
								</view>
							</view>
						</view>
					</view>
					<!-- 留言 -->
					<view class="leave_msg" v-if="cureentItem.find(item=> item == 'overhaul') || value[0] == 'overhaul'">
						<text>留言</text>
						<textarea v-model="overhaulLeaveMsg" @confirm="submitLeaveMsg('3')" placeholder="可以对工作人员填写留言" :disabled="overhaul.is_user_msg == 1?true:false || currentStep>6?true:false"></textarea>
					</view>
				</view>
			</uni-collapse-item>
			<!-- 品控 -->
			<uni-collapse-item :border="false" title-border="none" v-show="false">
				<template v-slot:title>
					<view class="flex flex_align mar_left_middle pad_top pad_bottom" @click="collOpen('品控')" style="position: relative;">
						<u-image src="@/static/image/pk.jpg" width="45rpx" height="45rpx"></u-image>
						<text class="mar_left" style="font-size: 28rpx;color:#333639;">品控板块</text>
						<u-badge :isDot="false" type="error" :absolute="true" customStyle="left:200rpx; top:20rpx;"></u-badge>
					</view>
				</template>
				<view class="rep_content"  style="padding-bottom: 30rpx; background-color: #f1f2f3;" v-if="false">
					<view class="header flex flex_bet">
						<view>售后人员:<text class="after_sale">小红包服务中心</text></view>
						<view class="res">维修结果：<text class="text_bg">PASS通过</text></view>
					</view>
					<view class="rep_desc">
						<text>描述说明</text>
						<view class="fot flex flex_bet">
							<view class="fot_remark">复判人员填写描述说明，复判人员填写描述说明</view>
							<view class="right">
								<view class="date">
									2022-05-13 20:01
								</view>
								<view class="img">
									<u-swiper indicator :autoplay="false" v-if="testimg" :list="testimg" indicatorStyle="bottom:-15%"
										@click="bannerShow(index,overhaul.overhaul_img ? overhaul.overhaul_img : '')" @change="e => current = e.current" height="85" overflowVisible="visible">
										<view slot="indicator" class="indicator">
											<view class="indicator__dot" v-for="(item, index) in testimg" :key="index"
												:class="[index === current && 'indicator__dot--active']">
											</view>
										</view>
									</u-swiper>
								</view>
							</view>
						</view>
					</view>
					<!-- 留言 -->
					<view class="leave_msg">
						<text>留言</text>
						<textarea v-model="value1" placeholder="可以对工作人员填写留言" ></textarea>
					</view>
				</view>
			</uni-collapse-item>
			<!-- 寄回 -->
			<uni-collapse-item :border="false" title-border="none" :disabled="sendback?false:true" name="sendback">
				<template v-slot:title>
					<view class="flex flex_align mar_left_middle pad_top pad_bottom" @click="cellDisabled(sendback)" style="position: relative;">
						<u-image src="@/static/image/jh.jpg" width="45rpx" height="45rpx"></u-image>
						<text class="mar_left" style="font-size: 28rpx;color:#333639;">寄回板块</text>
						<u-badge :isDot="isDot=='sendback'&& sendback != null?true:false" type="error" :absolute="true" customStyle="left:200rpx; top:20rpx;"></u-badge>
					</view>
				</template>
				<view class="rep_content"  style="overflow: hidden; background-color: #f1f2f3;" v-if="sendback">
					<view class="header flex flex_bet flex_align">
						<view>售后人员：<text class="after_sale">{{sendback.admin_name}}</text></view>
						<view><text class="text_bg">{{sendback.sendback_time | newDate(type='rq')}}</text></view>
					</view>
					<view class="rep_desc box_redius">
						<text>寄回备注说明</text>
						<view class="fot flex flex_bet">
							<view class="fot_remark">{{sendback.sendback_desc?sendback.sendback_desc:'无备注说明'}}</view>
							<view class="right">
								<view class="date">
									{{sendback.sendback_time | newDate}}
								</view>
								<view class="img">
									<u-swiper indicator :autoplay="false" :list="sendback.sendback_img?sendback.sendback_img.split(','):swiperDefImg" indicatorStyle="bottom:-15%"
										@click="bannerShow(index,sendback.sendback_img ? sendback.sendback_img.split(',') : '')" @change="e => current = e.current" height="80" overflowVisible="visible">
										<view slot="indicator" class="indicator">
											<view class="indicator__dot" v-for="(item, index) in 1" :key="index"
												:class="[index === current && 'indicator__dot--active']">
											</view>
										</view>
									</u-swiper>
								</view>
							</view>
						</view>
						<view class="send_num  pad_top_middle pad_bottom_middle flex">
							寄回单号<text style="margin-left: 5px;">{{sendback.tracking_number?sendback.tracking_number:'暂未寄出'}}</text><view class="iconfont icon-fuzhi" style="margin-bottom: 5px;" @click="copy(sendback.tracking_number)"></view>
						</view>
						<view class="logistics_status pad_top_middle pad_bottom_middle flex flex_bet flex_align" @click="gotoUrl('/pages/applicationDetails/component/logisticsStatus?expressageId='+sendback.tracking_number+'&phone='+repairList.user_phone)">
							<text>物流状态</text><text class="iconfont icon-xiangyoujiantou"></text>
						</view>
					</view>
					
					<!-- 留言 -->
					<view class="leave_msg" v-if="cureentItem.find(item=> item == 'sendback')  || value[0] == 'sendback'">
						<text>留言</text>
						<textarea v-model="sendbackLeaveMsg" @confirm="submitLeaveMsg('4')" placeholder="可以对工作人员填写留言" :disabled="sendback.is_user_msg == 1?true:false|| currentStep>8?true:false"></textarea>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import {
		repairProgress,
		updatePaymentImg,
		repairGiveup,
		isExpressAdvance,
		repairBadUpdate,
		userMsgAdd
	} from '@/api/repair.js'
	import {
		uploadImg,
		dateNew
	} from '@/utils/index.js'
	import {
		wxpayInfo
	} from '@/api/Public.js'
	import tracking from './tracking.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			tracking
		},
		props: {
			sid: {
				type: Number,
				default: 0
			},
			repairList: {
				type: Object,
				default: {}
			},
			traceInfoList: {
				type: Array,
				default: []
			}
		},
		computed: {
			...mapState([
				'openid'
			]),
			//付款了和放弃维修都禁止点击
			payStatus() {
				return this.payment?.pay_status == 1 ? true : false || this.is_giveup == 1 ? true : false
			}
		},
		watch: {
			sid(val) {
				this.getrepairProgress(val)
			},
			//监听需要开启哪一个
			operation_status(val){
				console.log(val,'范围');
				if(val == 1 && this.signfor != null || val == 2 && this.retrial == null){
					this.value=['signfor']
					this.isDot = 'signfor'
				}else if(val == 2 && this.retrial != null || val == 3 && this.quote == null){
					this.value=['retrial']
					this.isDot = 'retrial'
				}else if(val == 4 || val == 3&& this.quote != null){
					this.value=['quote']
					this.isDot = 'quote'
					this.currentItem=['quote']
				}else if(val == 5 || val == 6&& this.overhaul != null){
					this.value=['overhaul']
					this.currentItem=['overhaul']
					this.isDot = 'overhaul'
				}else if(val > 6 && this.sendback != null){
					this.value=['sendback']
					this.isDot = 'sendback'
				}else if(this.retrial != null && this.retrial.retrial_status == '复判报废' && this.sendback == null){
					this.value=['retrial']
					this.isDot = 'retrial'
				}
			}
		},
		filters: {
			filtersEmpty(val) {
				return val ? val : ''
			}
		},
		data() {
			return {
				operation_status: 0,
				express_status: null,  //快递状态
				signfor: null,
				retrial: null,
				quote: null,
				payment: null,
				overhaul: null,
				sendback: null,
				fileList: [],
				addForm: {
					payment_img: '',
					payment_no: ''
				},
				bad_info: {
					bad_type: 0,
					bad_desc: '',
					// bad_advance:false
				}, 
				is_giveup: 0,
				show: false,
				current: 0,
				currentStep: 0,   //当前步骤
				//测试轮播图
				testimg:[
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				],
				swiperDefImg:['https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noUpload.png'],
				isScrap:true,
				is_send_btn:false,
				is_advance:0, //是否预支付 默认勾选
				freight:0,//暂存预支付运费
				retrialLeaveMsg:'',//复判模块留言
				quoteLeaveMsg:'',//报价模块留言
				overhaulLeaveMsg:'',//维修模块留言
				sendbackLeaveMsg:'',//寄回模块留言
				value:[],
				cureentItem:[],
				isDot:'',
			}
		},
		onLoad() {
			this.getrepairProgress()
		},
		methods: {
			// 监听到付方式寄回是否选中
			advChange(e){
				// console.log(e,'1111');
				//监听是否勾选寄回的运费
				if(!e){
					// this.quote.return_freight = 0
					let params = {
						id:this.sid,
						is_advance:0
					}
					console.log(params);
					isExpressAdvance(params).then(res=>{
						console.log(res);
						this.getrepairProgress(this.sid)
					}).catch(err=>{
						this.$refs.uToast.show({
							message: err.msg,
							type: 'error',
							icon: false
						})
					})
				}else{
					let params = {
						id:this.sid,
						is_advance:1
					}
					console.log(params);
					isExpressAdvance(params).then(res=>{
						console.log(res);
						this.getrepairProgress(this.sid)
					}).catch(err=>{
						this.$refs.uToast.show({
							message: err.msg,
							type: 'error',
							icon: false
						})
					})
					// this.quote.return_freight=this.freight
				}
			},
			//页面跳转
			gotoUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			//监听
			collChange(e){
				this.cureentItem = e
				console.log(e,123456);
			},
			//监听当前打开的折叠块
			collOpen(item){
				// console.log(item,'123');
			},
			openclickable() {
				this.$emit('openclickable')
			},
			//获取寄修进度
			getrepairProgress(id) {
				repairProgress({
					id: id
				}).then(res => {
					this.operation_status = res.data.operation_status
					this.currentStep = res.data.operation_status
					this.signfor = res.data.signfor
					// this.signfor.signfor_img = [res.data.signfor]
					//fool interface
					if (res.data.retrial) {
						this.retrial = res.data.retrial
					}
					// this.freight = res.data.quote.return_freight
					this.quote = res.data.quote
					this.payment = res.data.payment
					this.overhaul = res.data.overhaul
					this.sendback = res.data.sendback
					// if(res.data.retrial.retrial_status !== '复判报废' || res.data.retrial.retrial_status !== '过保维修'){
						this.quoteLeaveMsg =  res.data.quote ?res.data.quote.user_msg :''
						this.overhaulLeaveMsg = res.data.overhaul ? res.data.overhaul.user_msg :''
						this.sendbackLeaveMsg = res.data.sendback ? res.data.sendback.user_msg :''
					// }
					if (res.data.payment?.payment_img_url) {
						this.fileList = [{
							url: res.data.payment.payment_img_url,
							status: 'success'
						}]
						this.addForm.payment_img = res.data.payment.payment_img
						this.addForm.payment_no = res.data.payment.payment_no
					}
					
					console.log('获取寄修进度', res.data)
					this.bad_info.bad_type = res.data.bad_info.type
					this.bad_info.bad_desc = res.data.bad_info.desc
					this.is_giveup = res.data.is_giveup
				}).catch(err => {
					console.log('获取寄修进度catch',err)
				})
			},
			//复制订单号
			copy(item) {
				let that = this
				if (!item) return that.$u.toast('暂无订单号信息');
				uni.setClipboardData({
					data: item,
					success(res) {
						that.$u.toast('复制成功')
					}
				})
			},
			//图片上传
			afterRead(event) {
				let that = this
				uploadImg(event).then(res => {
					let {
						data
					} = res
					this.fileList = [{
						url: data.fullurl,
						status: 'success'
					}]
					this.addForm.payment_img = data.url
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			//
			confirm() {
				this.getupdatePaymentImg()
			},
			//付款图片上传
			getupdatePaymentImg(img) {
				let {
					payment_img,
					payment_no
				} = this.addForm
				updatePaymentImg({
					payment_img: payment_img,
					payment_no: payment_no,
					id: this.sid
				}).then(res => {
					this.$refs.uToast.show({
						message: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//轮播图预览
			bannerShow(index,item) {
				if(!item) return
				console.log('----', index)
				this.previewImage(item, index)
			},
			// bannerShow(index) {
			// 	console.log('----', index)
			// 	this.previewImage(this.retrial.element_img, index)
			// },
			//预览付款图片
			previewImage(url, index) {
				uni.previewImage({
					// 先filter找出为图片的item，再返回filter结果中的图片url
					urls: Array.isArray(url) ? url : [url],
					current: index,
					fail() {
						uni.$u.toast('预览图片失败')
					},
				});
			},
			//跳转前判断
			goToExpUrl(order_num) {
				if (!order_num) return uni.$u.toast('请先完善快递单号')
				uni.navigateTo({
					url: '/pages/expressCheck/index?order_num=' + order_num
				})
			},
			getrepairGiveup(obj, is_giveup) {
				if (obj?.pay_status) return
				if (is_giveup == 1) return
				this.show = true
			},
			//是否放弃维修
			getConfirm() {
				this.show = false
				console.log(this.bad_info,'查看是否需要寄回0不需要1需要');
				repairGiveup({
					...this.bad_info,
					id: this.sid
				}).then(res => {
					this.$refs.uToast.show({
						message: res.msg,
						type: 'success',
						icon: false
					})
					this.getrepairProgress(this.sid)
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//确认支付
			confirmPayment(obj, is_giveup) {
				//0未支付，1已支付
				if (obj?.pay_status) return
				if (is_giveup == 1) return
				wxpayInfo({
					id: this.sid,
					openid: this.openid,
					...this.bad_info,
				}).then(res => {
					let that = this
					let {
						timeStamp,
						nonceStr,
						signType,
						paySign
					} = res.data
					wx.requestPayment({ //请求支付
						timeStamp: timeStamp.toString(),
						nonceStr: nonceStr,
						package: res.data.package,
						signType: signType,
						paySign: paySign,
						success: function(ress) {
							that.getrepairProgress(that.sid)
						},
						fail: function(error) {
							console.log('支付失败', error);
							that.$refs.uToast.show({
								message: '支付失败',
								type: 'error',
								icon: false
							})
						}
					})
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			// 原件不良品需寄回
			needSend(){
				console.log('寄回',this.sid);
				repairBadUpdate({
					id:this.sid,
					bad_type:1,
				}).then(res=>{
					this.$refs.uToast.show({
						message:'成功',
						icon:false,
						type:'success'
					})
					this.is_send_btn = true
					this.getrepairProgress(this.sid)
				})
			},
			// 原件不良品请丢弃
			pleaseDiscard(){
				console.log('丢弃',this.sid);
				repairBadUpdate({
					id:this.sid,
					bad_type:0,
				}).then(res=>{
					this.$refs.uToast.show({
						message:'成功',
						icon:false,
						type:'success'
					})
					this.is_send_btn = true
					this.getrepairProgress(this.sid)
				})
			},
			// 提交留言
			submitLeaveMsg(type){
				this.$refs.uToast.show({
					message:'留言成功！'
				})
				let params = {
					id:this.sid,
					operation_status:0,
					content:''
				}
				// 复判
				if(type==1){
					params.operation_status = 2
					params.content = this.retrialLeaveMsg
					this.retrial.is_user_msg=1
				}
				//报价
				if(type==2){
					params.operation_status = 3
					params.content = this.quoteLeaveMsg
					this.quote.is_user_msg=1
				}
				//维修
				if(type==3){
					params.operation_status = 5
					params.content = this.overhaulLeaveMsg
					this.overhaul.is_user_msg=1
				}
				//寄回
				if(type==4){
					params.operation_status = 7
					params.content = this.sendbackLeaveMsg
					this.sendback.is_user_msg=1
				}
				userMsgAdd(params).then(res=>{
					// console.log(res);
					this.getrepairProgress(this.sid)
				})
			},
			//判断板块是否可以打开
			cellDisabled(item){
				console.log(item);
				if(item) return
				if(item==null){
					return this.$refs.uToast.show({
						message: '还未到此环节！',
						type: 'info',
						icon: false
					})
				}
			},
			noDone(){
				this.$refs.uToast.show({
					message: '功能暂未开放！',
					type: 'info',
					icon: false
				})
			},
			showaaa(e){
				console.log(e,'123gai0');
			}
		}
	}
</script>

<style scoped>
	.result_imgs /deep/.u-swiper{
		overflow: visible;
	}
	
</style>

<style lang="scss" scoped>
	.xhb_tag{
		padding: 0 10rpx;
		color: #555;
		background-color: #eaeaea;
		font-size: 20rpx;
		border-radius: 7rpx;
	}
.content {
	border-radius: $border-radius-box;
	color: #666666;
	padding: 20rpx;
	.date {
		color: #dadada;
		border-bottom: 1px dashed #dadada;
		padding-bottom: 0rpx;
	}
	.header{
		font-size: 28rpx;
		.right{
			display: flex;
			flex-direction: column;
			text-align: center;
			.ck{
				font-size: 24rpx;
			}
		}
	}
	.details_text{
		.info{
			width: 180rpx;
			text-align: justify;
			text-justify: distribute-all-lines;
			text-align-last:justify;
		}
		.sn_code{
			border-bottom: 1px solid #dadada;
		}
		.line{
			width: 100%;
			height: 1px;
			background: #f7f7f7;
			margin-top: 10px;
		}
	}
}
	.rep_desc{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #8b8b8b;
	.fot{
		margin: 20rpx 0;
		margin-top: 10rpx;
		.fot_remark{
			width: 63%;
			height: 230rpx;
			border-radius: 20rpx;
			padding: 10rpx;
			border: 1px dashed #ddd;
			overflow-y: auto;
		}
	}
	.right{
		// width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.date{
			font-size: 20rpx;
		}
	}
	.img{
			width: 75%;
			padding: 0 10rpx;
			margin-bottom: 40rpx;
		}
	}
	//步骤条
	.steps {
		margin-top: 10rpx;
		padding: 30rpx 10rpx;
    .out-box {
      display: flex;
      justify-content: space-between;
      .self-box {
        position: relative;
        width: 60rpx;
        height: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
		text{
			font-size: 26rpx;
		}
		.defult_txt{
			color: #cfcfcf;
		}
		.active_txt{
			color: #eba889;
		}
		.success_txt{
			color: #000;
			display: inline-block;
			&:after{
				position: absolute;
				top: -16rpx;
				right: -16rpx;
				content: '';
				width: 30rpx;
				height: 30rpx;
				background:url('../../../static/image/greenok.png');
				background-size: 100%;
			}
		}
        view {
          width: 50rpx;
          height: 2rpx;
          border-bottom: 1px dashed #c7c8ca;
          position: absolute;
          top: 15rpx;
          left: 70rpx;
        }
        .currentFontColor {
          color: #409eff;
        }
        .currentLineColor {
          background-color: #409eff;
        }
      }
    }
  }
	.header{
		margin: 20rpx 0;
		font-size: 21rpx;
		color: #8b8b8b;
			.after_sale{
				color: #000;
				font-size: 25rpx;
			}
		}
	//签收
	.sign_content{
		position: relative;
		padding:  20rpx;

		.date{
			background: #d1deef;
			color: #7093d4;
			font-size: 24rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			font-weight: bold;
		}
		.sign_main{
			font-size: 22rpx;
			color: #8b8b8b;
		}
		.decs{
			margin-top: 20rpx;
			font-size: 22rpx;
			color: #8b8b8b;
			.fot{
				margin-top: 20rpx;
				.fot_remark{
					width: 63%;
					height: 200rpx;
					border-radius: 20rpx;
					padding: 10rpx;
					border: 1px dashed #ddd;
					overflow-y: auto;
				}
			}
			.right{
				width: 32%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.img{
					width: 75%;
					padding: 0 10rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
	//复判
	.rep_content{
		padding: 0 20rpx;
	}
	//复判板块的客户确认模块
	.client_confirm{
		.top_line{
			width: 100%;
			height: 1px;
			background-color: #ddd;
			position: absolute;
			top: 0;
			left: 0;
			box-shadow: 0px 2px 10px 5px #ddd;
		}
		.client_confirm_cont{
			position: relative;
			padding: 10rpx 15rpx 40rpx 15rpx;
			box-shadow: 0px 2px 10px 1px #ddd;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			font-size: 28rpx;
			background-color: #fff;
			margin-top: 10rpx;
			.tit{
				font-weight: 600;
				position: relative;
				margin-left: 20rpx;
				text{
					position: absolute;
					top: 0;
					left: -20rpx;
					font-size: 18rpx;
					color:red;
				}
			}
			.text{
				margin: 10rpx 0 20rpx;
				line-height: 45rpx;
				text-indent:2em;
			}
					
		}
	}
	//报价
	.price_content{
		padding: 0 20rpx;
		.price_detail{
			.meta_price{
				font-size: 28rpx;
				padding: 20rpx 0;
				border-bottom: 1px solid #f7f7f7;
				color: #494b4c;
				.pic{
					width: 150rpx;
				}
			}
		}
	}
	//下载报价单
	.download{
		padding: 15rpx 7rpx;
    border: 1px solid #488df6;
    color: #488df6;
    font-size: 20rpx;
    border-radius: 10rpx;
		.iconfont{
			font-size: 24rpx;
		}
	}
	.leave_msg{
		margin: 30rpx 0 40rpx 0;
		font-size: 28rpx;
		textarea {
			// z-index: 1;
			border: 1px solid #aeb7f7 !important;
			height: 50px !important;
			width: 96% !important;
			border-radius: 20rpx;
			padding: 10rpx;
			background-color: #e4e6e8;
		}
	}
	.leave_msg_forbidden{
		textarea{
			border: 1px solid #ccc !important;
		}
	}
	.send_num,.logistics_status {
		font-size: 28rpx;
		border-bottom: 1px solid #f7f7f7;
		.iconfont{
			font-size: 26rpx;
		}
	}
	.slot-icon {
			width: 21px;
			height: 21px;
			background-color: $u-warning;
			border-radius: 100px;
			font-size: 12px;
			color: #fff;
			line-height: 21px;
			text-align: center;
		}
	.sign {
		.sign_img {
			font-size: 28rpx;
			image {
				height: 48rpx;
				width: 48rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.check {
		text-decoration: underline;
		color: rgb(41, 121, 255);
	}
	//付款的那条线
	.payment_line{
		width: 110%;
		height: 1px;
		background-color: #dedee0;
	  transform: translateX(-5%);
		box-shadow: 7px 1px 3px 0px #ccc;
	}
	.payment {
		box-shadow: 1px 2px 6px 2px #ddd;
		padding: 10px 15px;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
		background-color: #fff;
		.replenish{
			textarea{
				border: 1px solid #8a92d2;
				border-radius: 20rpx;
				padding: 10rpx;
				width: 96%;
				height: 60px;
				background-color: #e4e6e8;
				font-size: 28rpx;
			}
		}
		.pre_pay{
			padding: 20rpx 0;
			border-top: 1px solid #f7f7f7;
			border-bottom: 1px solid #f7f7f7;
			margin: 40rpx 0;
		}
		.payment_btn {
			border-radius: 50px;
			padding: 10px 0;
			letter-spacing: 2px;
			color: #fff;
			width: 45%;
			text-align: center;
		}
		/deep/.u-radio-group.u-radio-group--row{
			justify-content: space-between !important;
		}
		.blue {
			background-color: #0165FF;
		}

		.green {
			background-color: #00E527;
		}

		.yellow {
			background-color: #EBB054;
		}

		.line {
			border-left: 1rpx solid #fff;
			margin: 0 10rpx;
		}
	}
	
	//轮播图
	.indicator {
			@include flex(row);
			justify-content: center;
	
			&__dot {
				height: 6rpx;
				width: 6rpx;
				border-radius: 50%;
				// background-color: rgba(255, 255, 255, 0.35);
				background-color: #fff;
				margin: 0 2px;
				transition: background-color 0.3s;
				border: 1px solid #cad6d6;

				&--active {
					background-color: #2979ff;
				}
			}
		}
	
		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 50%;
			width: 35px;
			@include flex;
			justify-content: center;
	
			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
</style>
